<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>编辑器</title>
	<link rel="stylesheet" href="./css/bootstrap.min2.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" href="css/citySelect.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/citySelect.js"></script><!-- 联动选择 -->
	<script src="js/colorpicker.js"></script><!-- 拾色器 -->
	<!-- 折叠展开 -->
	<script>
	$(document).ready(function(){
	  $(".hideBtn").click(function(){
	    $("#collapseOne",".hideBtn").hide();
	    $(".hideBtn2").show();
	    $(".rightLayout").css({"width":"80px"});
	  });
	});
	$(document).ready(function(){
	  $(".hideBtn2").click(function(){
	    $("#collapseOne",".hideBtn").show();
	    $(".hideBtn2").hide();
	    $(".rightLayout").css({"width":"360px"});
	  });
	});
	// 滚动条样式
	$(document).ready(function(){
	  $(".addTemplateText").click(function(){
	    $(".vk-scroll-bar").css({"opacity":"1"});
	  });
	});
	</script>

</head>
<body>
<!-- 顶部导航 -->
<nav class="navbar navbar-default infoLayout" role="navigation" style="background-image: linear-gradient(to right, #03dbd2 , #4693ec);">
	<div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="images/logo.png" alt="" style="width: 180px;"></a>
    </div>
    <div>
        <!--向左对齐-->
        <ul class="nav navbar-nav navbar-left zuobian">
			<li class="active"><a href="#">新建</a></li>
			<li><a href="#">更换模板</a></li>
			<li class=""><a href="#">我的设计</a></li>
			<li><a class="caozuo" href="#"><i style="margin-right: 5px;"><img src="images/19-12.png" style="width: 15px;"></i>上一步</a></li>
			<li class=""><a class="caozuo" href="#">下一步<i style="margin-left: 5px;"><img src="images/19-13.png" style="width: 15px;"></i></a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					<i style="margin-right: 5px;"><img src="images/19-14.png" style="width: 15px;"></i>保存 <b class="caret"></b>
				</a>
				<ul class="dropdown-menu" style="border-radius: 5px;">
					<li style="width: 100%;"><a href="#">保存</a></li>
					<li style="width: 100%;"><a href="#">另存为</a></li>
				</ul>
			</li>
			<li><a href="#"><i style="margin-right: 5px;"><img src="images/19-15.png" style="width: 15px;"></i>分享</a></li>
		</ul>
        <!--向右对齐-->
        <div class="nav navbar-nav navbar-right">
        	<form class="navbar-form navbar-right" role="search" style="margin: 0;padding: 0;">
	            <button type="submit" class="btn btn-default xiazai">
	                <i style="margin-right: 5px;"><img src="images/19-17.png" style="width: 18px;"></i>无水印下载
	            </button>
	        </form>
        	<form class="navbar-form navbar-right" role="search" style="margin: 0;padding: 0;">
	            <button type="submit" class="btn btn-default yulan">
	                <i style="margin-right: 5px;"><img src="images/19-16.png" style="width: 18px;"></i>预览
	            </button>
	        </form>
        </div>
        <!-- <form class="navbar-form navbar-right" role="search" style="padding-right: 30px;margin-top: 11px;">
            <button type="submit" class="btn btn-default shengji">
                升级VIP
            </button>
        </form> -->
    </div>
	</div>
</nav>
<div class="contentWrapper">
<div class="canvasLayout">
	
</div>
	<!-- 左边操作栏 -->
	<div class="rightLayout" style="right: 0px;">
		<div class="hideBtn">
			<i class="iconfont glyphicon glyphicon-chevron-right"></i>		
		</div>
		<div class="hideBtn2">
			<i class="iconfont glyphicon glyphicon-chevron-left"></i>		
		</div>
		<div class="navLayout">
			<div class="navWrapper">
				<ul id="myTab" class="" style="margin: 0;padding: 0;">
					<li class="mb-tab active">
						<a href="#muban" data-toggle="tab">
							 <i class="iconV7_0"><img src="images/19-01.png"></i>
							 <div class="navText">模板</div>
						</a>
					</li>
					<li  class="wz-tab">
						<a  href="#wenzi" data-toggle="tab">
							<i class="iconV7_0"><img src="images/19-02.png"></i>
							 <div class="navText">文字</div>
						</a>
					</li>
					<li class="tk-tab">
						<a href="#tuku" data-toggle="tab">
							<i class="iconV7_0"><img src="images/19-03.png"></i>
							 <div class="navText">图库</div>
						</a>
					</li>
					<li class="xz-tab">
						<a  href="#xingzhuang" data-toggle="tab">
							<i class="iconV7_0"><img src="images/19-04.png"></i>
							 <div class="navText">线条形状</div>
						</a>
					</li>
					<li class="sc-tab">
						<a  href="#shangchuan" data-toggle="tab">
							<i class="iconV7_0"><img src="images/19-05.png"></i>
							 <div class="navText">上传</div>
						</a>
					</li>
				</ul>
				<div style="position: fixed;bottom: 15px;">
					<a class="jiaocheng" href="#shangchuan" style="display: block;">
						<i class="iconV7_0"><img src="images/19-06.png"></i>
						 <div class="navText">教程</div>
					</a>
					<a class="jiaocheng" href="#shangchuan" style="display: block;">
						<i class="iconV7_0"><img src="images/19-07.png"></i>
						 <div class="navText">帮助</div>
					</a>
				</div>
			</div>
		</div>
		
		<div id="collapseOne" class="toolLayout">
			<div id="myTabContent" class="toolWrapper">
				<div class="fade" id="wenzi" style="display: none;">
					<div class="commonCopywritingBtn">
						<span class="glyphicon glyphicon-pencil"></span>
						常用文案设置
					</div>
					<div class="addTemplateText">
						<div class="specificWordAddArea" >
							<div class="vk-scroll-cont">
								<div class="vk-scroll-wrap dropUl" style=" overflow: auto;">
									<div style="display: inline-block;">
										<div class="specificWordItem wz-anniu" id="add" onclick="addTitle()">
											<img src="images/img1.jpg" alt="" >
										</div>
										<div class="specificWordItem">
											<img src="images/img1.jpg" alt="">
										</div>
									</div>
								</div>
							</div>
							
						</div>
					</div>
				</div>
				<div class="dropUl fade in active" id="muban" style="position: absolute;top: 0;width: 280px;height: 100%;overflow: auto;">
					<div class="temp">
						<div class="temp-head">
							<div class="temp-nav">
								<div class="temp-nav-menu">
								    <div class="citySelect">
								        <span class="cityName">新媒体配图</span>
								        <i class="iconDown caret"></i>
								        <i class="line"></i>
								    </div>
								    <div class="dropDown">
								        <div class="dropProv">
								            <ul class="dropProvUl dropUl"></ul>
								        </div>
								        <div class="dropCity">
								            <ul class="dropCityUl dropUl"></ul>
								        </div>
								    </div>
								</div>
							</div>
							<div class="temp-search">
								<input type="text" placeholder="10 0000+精选素材供您挑选">
								<span class="ic glyphicon glyphicon-search"></span>
							</div>
						</div>
						<div class="temp-container" style="margin-top: 10px;">
							<div class="vk-scroll-wrap" style="height: auto;margin: 0 10px;">
								<div>
									<div class="tupian">
										<img src="images/img2.jpg">
									</div>
									<div class="tupian">
										<img src="images/img2.jpg">
									</div>
									<div class="tupian">
										<img src="images/img2.jpg">
									</div>
									<div class="tupian">
										<img src="images/img2.jpg">
									</div>
									<div class="tupian">
										<img src="images/img2.jpg">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="fade" id="tuku" style="position: absolute;top: 0;width: 280px;height: 100%;display: none;">
					<div class="galleryPanel">
						<div class="gallery-tab">
							<a class="active" href="">全部分类</a>
							<a class="" href="">最近使用</a>
							<a class="" href="">我的收藏</a>
						</div>
					</div>
					<div style="height: auto;">
						<div class="galleryNav">
							<a class="galleryNavItem artWord">
								<i class="icon icon-artWord"></i>
								<span>艺术字</span>
							</a>
							<a class="galleryNavItem background">
								<i class="icon icon-background"></i>
								<span>背景</span>
							</a>
							<a class="galleryNavItem element active">
								<i class="icon icon-pic"></i>
								<span>通用元素</span>
							</a>
							<a class="galleryNavItem fastivalElement">
								<i class="icon icon-pic"></i>
								<span>节日元素</span>
							</a>
							<a class="galleryNavItem floatElement">
								<i class="icon icon-pic"></i>
								<span>漂浮元素</span>
							</a>
							<a class="galleryNavItem borderElement">
								<i class="icon icon-pic"></i>
								<span>边框纹理</span>
							</a>
							<a class="galleryNavItem cartoonElement">
								<i class="icon icon-pic"></i>
								<span>卡通人物</span>
							</a>
							<a class="galleryNavItem descElement">
								<i class="icon icon-pic"></i>
								<span>装饰图案</span>
							</a>
						</div>
						<div class="artWordPanel dropUl" style="height: 100%;">
							<div style="padding-left: 15px;">
								<div class="assetListArea">
									<div>
										<div class="assetItem">
											<img src="images/img3.jpg">
										</div>
										<div class="assetItem">
											<img src="images/img3.jpg">
										</div>
										<div class="assetItem">
											<img src="images/img3.jpg">
										</div>
										<div class="assetItem">
											<img src="images/img3.jpg">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="fade" id="xingzhuang" style="position: absolute;top: 0;width: 280px;height: 100%;display: none;">
					<div class="galleryPanel">
						<div class="gallery-tab">
							<a class="active" href="">全部分类</a>
							<a class="" href="">最近使用</a>
							<a class="" href="">我的收藏</a>
						</div>
					</div>
					<div style="height: auto;">
						<div class="galleryNav">
							<a class="typeBtnItem ">
								<i class="icon icon-artWord"></i>
								<span>全部</span>
							</a>
							<a class="typeBtnItem ">
								<i class="icon icon-background"></i>
								<span>形状</span>
							</a>
							<a class="typeBtnItem  active">
								<i class="icon icon-pic"></i>
								<span>线</span>
							</a>
							<a class="typeBtnItem ">
								<i class="icon icon-pic"></i>
								<span>文字容器</span>
							</a>
							<a class="typeBtnItem ">
								<i class="icon icon-pic"></i>
								<span>图标</span>
							</a>
							<a class="typeBtnItem ">
								<i class="icon icon-pic"></i>
								<span>表格</span>
							</a>
							<a class="typeBtnItem ">
								<i class="icon icon-pic"></i>
								<span>日历</span>
							</a>
						</div>
						<div class="artWordPanel dropUl" style="height: 100%;">
							<div style="padding-left: 15px;">
								<div class="assetListArea">
									<div>
										<div class="xz-img">
											<img src="images/img4.jpg">
										</div>
										<div class="xz-img">
											<img src="images/img4.jpg">
										</div>
										<div class="xz-img">
											<img src="images/img4.jpg">
										</div>
										<div class="xz-img">
											<img src="images/img4.jpg">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="userUploadAreaArea fade" id="shangchuan" style="position: absolute;top: 0;display: none;">
					<div class="userUploadAreaRight">
						<div class="userUploadBtn">
							<div>上传本地图片</div>
							<div class="userUploadBox">
								<form enctype="multipart/form-data" class="hiddenUploadForm"></form>
							</div>
						</div>
						<div class="userUploadTip">
							<p style="color: rgb(255, 120, 126); display: inline;">*</p>
							支持上传20M以下png／jpg格式的本地图片
							<br>
							快捷上传：直接拖拽本地图片至画布，或ctrl+v

						</div>
						<div class="userAssetList">
							<div style="margin-bottom: 20px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		$(document).ready(function(){
			//左边部分切换
		  $(".mb-tab").click(function(){
		    $("#wenzi,#tuku,#xingzhuang,#shangchuan,.bjq-tab,.bjq-wenzi,.bjq-tuku,.bjq-tk-tab,.bjq-xz-tab,.bjq-xingzhuang").hide();
		    $("#muban,.tabItemBig,.huabu").show();
		  });
		  $(".wz-tab").click(function(){
		    $("#muban,#tuku,#xingzhuang,#shangchuan,.bjq-tab,.bjq-wenzi,.bjq-tuku,.bjq-tk-tab,.bjq-xz-tab,.bjq-xingzhuang").hide();
		    $("#wenzi,.tabItemBig,.huabu").show();
		  });
		  $(".tk-tab").click(function(){
		    $("#muban,#wenzi,#xingzhuang,#shangchuan,.bjq-tab,.bjq-wenzi,.bjq-tuku,.bjq-tk-tab,.bjq-xz-tab,.bjq-xingzhuang").hide();
		    $("#tuku,.tabItemBig,.huabu").show();
		  });
		  $(".xz-tab").click(function(){
		    $("#muban,#tuku,#wenzi,#shangchuan,.bjq-tab,.bjq-wenzi,.bjq-tuku,.bjq-tk-tab,.bjq-xz-tab,.bjq-xingzhuang").hide();
		    $("#xingzhuang,.tabItemBig,.huabu").show();
		  });
		  $(".sc-tab").click(function(){
		    $("#muban,#tuku,#xingzhuang,#wenzi,.bjq-tab,.bjq-wenzi,.bjq-tuku,.bjq-tk-tab,.bjq-xz-tab,.bjq-xingzhuang").hide();
		    $("#shangchuan,.tabItemBig,.huabu").show();
		  });
		  //文本、画布切换
		  $(".huabu-btn").click(function(){
		    $(".bjq-tab,.bjq-wenzi").hide();
		    $(".tabItemBig,.huabu").show();
		  });
		  //元素、画布切换
		  $(".huabu-btn2").click(function(){
		    $(".bjq-tk-tab,.bjq-tuku").hide();
		    $(".tabItemBig,.huabu").show();
		  });
		  //形状、画布切换
		  $(".huabu-btn3").click(function(){
		    $(".tabItemBig,.huabu").show();
		    $(".bjq-xz-tab,.bjq-xingzhuang").hide();
		  });
		  //图库切换右边
		  $(".assetItem").click(function(){
		    $(".tabItemBig,.huabu").hide();
		    $(".bjq-tk-tab,.bjq-tuku").show();
		  });
		  //形状切换右边
		  $(".xz-img").click(function(){
		    $(".tabItemBig,.huabu").hide();
		    $(".bjq-xz-tab,.bjq-xingzhuang").show();
		  });
		});
		//点击显示文本显示
		function addTitle(){
			$(".bjq-tab").show();
			$(".tabItemBig").hide();
			$(".bjq-wenzi").show();
			$(".huabu").hide();
		}
		</script>
	<!-- 右边 -->
	<div class="floatToolPanel" style="right: 0px; top: 0px;">
		<div class="contentTabAreaNew">
			<div class="tabItemBig active">画布属性</div>
			<div class="bjq-tab" style="display: none">
				<div class="tabItemSmall active" ><p>文本</p></div>
				<div class="tabItemSmall huabu-btn"><p>画布</p></div>
			</div>
			<div class="bjq-tk-tab" style="display: none">
				<div class="tabItemSmall active" ><p>元素</p></div>
				<div class="tabItemSmall huabu-btn2"><p>画布</p></div>
			</div>
			<div class="bjq-xz-tab" style="display: none;">
				<div class="tabItemSmall active" ><p>形状</p></div>
				<div class="tabItemSmall huabu-btn3"><p>画布</p></div>
			</div>
		</div>
		<div class="helperLayout" style="padding: 0px; width: 100%;">
			<div class="toolPanelDefaultScroll huabu" >
				<div class="toolPanelDefault">
					<div class="item changeSizeArea">
						<div class="itemTitle">尺寸</div>
						<div class="changeSizeBtn">
							<!-- react-text: 260 -->900<!-- /react-text --><!-- react-text: 261 --> x <!-- /react-text --><!-- react-text: 262 -->383<!-- /react-text -->
							<p data-toggle="modal" data-target="#myModal">编辑</p>
						</div>

					</div>
					<div class="item changeBackgroundColor" style="margin-top: 14px;">
						<div class="itemTitle">背景</div>
						<div class="changeBackgroundColorContent" style="padding: 8px;">
							<div class="colorBlock picker" id="color-picker" style="background-color: rgb(244, 143, 177);">	
								<img src="images/img5.jpg">
							</div>
							<!-- <div class="__moreColorsPreinstall">
								<div class="__moreColorIcon"></div>
							</div> -->
						</div>
					</div>
					<div class="bg-quick-pick">
						<div class="bg-quick-items" id="color-picker" style="background: url(./images/img6.jpg) center center / cover no-repeat;"></div>
						<div class="bg-quick-item" style="background: rgb(0, 0, 0);"></div>
						<div class="bg-quick-item" style="background: rgb(255, 216, 53);"></div>
						<div class="bg-quick-item" style="background: rgb(255, 201, 107);"></div>
						<div class="bg-quick-item" style="background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.5);"></div>
						<div class="bg-quick-item" style="background: url(./images/img7.jpg) center center / cover no-repeat;"></div>
						<div class="bg-quick-item" style="background: rgb(230, 83, 82);"></div>
						<div class="bg-quick-item" style="background: rgb(244, 101, 173);"></div>
						<div class="bg-quick-item" style="background: rgb(112, 188, 89);"></div>
						<div class="bg-quick-item" style="background: rgb(87, 117, 255);"></div>
						<div class="bg-quick-item" style="background: rgb(150, 107, 238);"></div>
						<div class="bg-quick-item" style="background: rgb(57, 218, 231);"></div>
					</div>
					<div class="userUploadAreaArea">
						<div class="userUploadAreaRight">
							<div class="userUploadBtn">
								<div>上传本地图片</div>
								<div class="userUploadBox">
									<form enctype="multipart/form-data" class="hiddenUploadForm"></form>
								</div>
							</div>
							<div class="userUploadTip">
								<p style="color: rgb(255, 120, 126); display: inline;">*</p>
								<!-- react-text: 291 -->支持上传20M以下png／jpg格式的本地图片<!-- /react-text -->
								<br>
								<!-- react-text: 293 -->快捷上传：直接拖拽本地图片至画布，或ctrl+v<!-- /react-text -->
							</div>
							<div class="userAssetList">
								<div style="margin-bottom: 20px;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="toolPanel toolPanelNew bjq-wenzi" style="display: none;">
				<div class="textEditorBox">
					<div class="textEditBlock">
						<div class="item">
							<div class="fontSelect commonSelect">
								<div class="fontSelectButton font180"></div>
								<i class="iconfont icon-upload1"></i>
								<div class="newFontSelectList" style="height: 182px;display: none;"> 
									<div class="cateFontListArea">
										<div class="cateFontList">
											<div class="react-scrollbar-default" style="width: inherit;overflow: hidden;height: 182px; position: relative;padding-top: 10px;">
												<div class="-reactjs-scrollbar-area -reactjs-scrollbar-area   -reactjs-scrollbar-area:scrolling -reactjs-scrollbar-area:scrolling" style="margin-top: -12px; margin-left: 0px;">
													<div>
														<div class="cateTitle"><!-- react-text: 2058 -->— <!-- /react-text --><!-- react-text: 2059 -->热门<!-- /react-text --><!-- react-text: 2060 --> —<!-- /react-text --></div>
														<div class="cateFontItem ">
															<div class="cateFontImg font4"></div>
														</div>
														<div class="cateFontItem ">
															<div class="cateFontImg font169"></div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="commonSelect fontSizeSelect">
								<div class="font-btn">
									<i class="iconfont icon-xiangshang-copy-copy"></i>
									<input type="text" class="fontSizeSelectInput" value="18">
								</div>
								
								<ul class="fontsizeList" style="height: 182px;display: none;">
									<li>12</li>
									<li>14</li>
									<li>18</li>
									<li>24</li>
								</ul>
							</div>
						</div>
						<div class="item">
							<div class="commonSelect colorsArea">
								<div class="__moreColorsPreinstall">
									<div class="__moreColorIcon" style="position: relative; float: right;"></div>
								</div>
								<div class="choiceColor" style="background: rgb(0, 0, 0);"></div>
							</div>
						</div>
						<div class="item">
							<div class=" commonSelect specificWordSelect">
								<div class="selectBtnImg" style="background-image: url(./images/img-67.png); width: 140px;"></div>
								<i class="iconfont icon-xiangshang-copy-copy"></i>
								
								<div class="specificWordSelectList" style="display: none;">
									<div class="react-scrollbar-default" style="width: inherit; overflow: hidden; height: 502px; position: relative;">
										<div class="-reactjs-scrollbar-area -reactjs-scrollbar-area    " style="margin-top: 0px; margin-left: 0px;">
											<div class="specificWordWrap">
												<div class="specificWordItem">
													<img src="images/img-65.png" alt="默认">
												</div
												><div class="specificWordItem">
													<img src="images/img-66.png" alt="1009描边1">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="typesettingBlock">
						<div class="typeBtnWrap">
							<div class="typeBtn ">
								<i><img src="images/19-19.png"></i>
							</div>
							<div class="typeBtn ">
								<i><img src="images/19-20.png"></i>
							</div>
							<div class="typeBtn ">
								<i><img src="images/19-21.png"></i>
							</div>
							<div class="typeBtn ">
								<i><img src="images/19-18.png"></i>
							</div>
						</div>
						<div class="typeBtnWrap">
							<div class="typeBtn ">
								<i><img src="images/19-22.png"></i>
							</div>
							<div class="typeBtn active">
								<i><img src="images/19-23.png"></i>
							</div>
							<div class="typeBtn ">
								<i><img src="images/19-24.png"></i>
							</div>
							<div class="typeBtn ">
								<i><img src="images/19-08.png"></i>
							</div>
						</div>
						<div class="slideBarGroup">
							<div class="slideBarItem">
								<p class="slideBarType">不透明</p>
								<div class="slideBar">
									<div class="slideBarButtonBar" style="width: 100px;"></div>
									<div class="slideBarButton" style="left: 100px;"></div>
									<div class="slideBarMask"></div>
									<div class="slideBarHide"></div>
								</div>
								<input type="text" class="slideBarInput" value="100%">
							</div>
							<div class="slideBarItem">
								<p class="slideBarType">字间距</p>
								<div class="slideBar">
								<div class="slideBarButtonBar" style="width: 50px;"></div>
								<div class="slideBarButton" style="left: 50px;"></div>
								<div class="slideBarMask"></div>
								<div class="slideBarHide"></div>
							</div>
							<input type="text" class="slideBarInput" value="0">
						</div>
						<div class="slideBarItem">
							<p class="slideBarType">行间距</p>
							<div class="slideBar">
								<div class="slideBarButtonBar" style="width: 13px;"></div>
								<div class="slideBarButton" style="left: 13px;"></div>
								<div class="slideBarMask"></div>
								<div class="slideBarHide"></div>
							</div>
							<input type="text" class="slideBarInput" value="13">
						</div>
					</div>
					<div class="assetsEditDoBlockFixed">
							<div class="buttonGroup">
								<div class="doBtn undefined" title="锁定"><p>锁定</p></div>
								<div class="doBtn" title="排序">排序</div>
								<div class="doBtn" title="复制">复制</div>
								<div class="doBtn" title="删除">删除</div>
							</div>
						</div>
				</div>
			</div>
		</div>
		<div class="toolPanel toolPanelNew bjq-tuku" style="display: none;">
			<div class="toolElementPanel">
				<div class="elementEditBlock">
					<div class="item">
						<div class="replaceBtn">替换图片</div>
					</div>
					<div class="item">
						<div style="width: 100%;">
							<p class="itemT">裁剪</p>
							<div class="clipGroup">
								<div class="clip">
									<i style="margin-right: 5px;"><img src="images/19-09.png"></i>
									<!-- react-text: 1508 -->裁剪<!-- /react-text -->
								</div>
								<div class="clip active">不裁剪</div>
							</div>
							<div class="commonSelect fontSizeSelect">
								<i class="iconfont icon-xiangshang-copy-copy"></i>
								<div class="itemTitle" style="display: flex; align-items: center;">
									<!-- react-text: 1513 --><!-- /react-text --><!-- react-text: 1514 -->形状裁剪<!-- /react-text -->
										
								</div>
								<div class="cutContainerArea" style="display: none;">
									<div class="cutContainerTip">选择您喜欢的形状进行裁剪</div>
									<div class="cutContainerList">
										<div class="cutContainerItem">
											<div class="containerImg" style="background: url(./images/img-68.png) center center / 60px no-repeat; width: 60px; height: 60px;">
												
											</div>
										</div>
										<div class="cutContainerItem">
											<div class="containerImg" style="background: url(./images/img-68.png) center center / 60px no-repeat; width: 60px; height: 60px;">
												
											</div>
										</div>
										<div class="cutContainerItem">
											<div class="containerImg" style="background: url(./images/img-68.png) center center / 60px no-repeat; width: 60px; height: 60px;">
												
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="typesettingBlock">
					<p class="title">翻转</p>
					<div class="typeBtnWrap">
						<div class="typeBtnLg ">
							<i style="margin-right: 5px;"><img src="images/19-10.png"></i>
							<!-- react-text: 1520 -->水平翻转<!-- /react-text -->
						</div>
						<div class="typeBtnLg ">
							<i style="margin-right: 5px;"><img src="images/19-11.png"></i>
							<!-- react-text: 1523 -->垂直翻转<!-- /react-text -->
						</div>
					</div>
					<div class="slideBarGroup">
						<div class="slideBarItem">
							<p class="slideBarType">不透明</p>
							<div class="slideBar">
								<div class="slideBarButtonBar" style="width: 100px;"></div>
								<div class="slideBarButton" style="left: 100px;"></div>
								<div class="slideBarMask"></div>
								<div class="slideBarHide"></div>
							</div>
							<input type="text" class="slideBarInput" value="100%">
						</div>
					</div>
				</div>
				<div class="assetsEditDoBlockFixed">
					<div class="buttonGroup">
						<div class="doBtn undefined" title="锁定">
							<p>锁定</p>
						</div>
						<div class="doBtn" title="排序">排序</div>
						<div class="doBtn" title="复制">复制</div>
						<div class="doBtn" title="删除">删除</div>
					</div>
				</div>
			</div>
		</div>
		<div class="toolPanel toolPanelNew bjq-xingzhuang" style="display: none;">
			<div class="toolSVGPanel">
				<div class="SVGEditBlock">
					<div class="item">
						<div style="width: 100%;">
							<div class="commonSelect" style="position: initial;">
								<div class="__moreColorsPreinstall">
									<div class="__moreColorIcon" style="position: relative; float: right;"></div>
								</div>
								<div class="choiceColor" style="background: rgb(16, 84, 181);"></div>
							</div>
							<div class="colorPanel"></div>
						</div>
					</div>
				</div>
				<div class="typesettingBlock">
					<div class="typeBtnWrap">
						<div class="typeBtnLg ">
							<i style="margin-right: 5px;"><img src="images/19-11.png"></i>
							<!-- react-text: 2567 -->横向翻转<!-- /react-text -->
						</div>
						<div class="typeBtnLg ">
							<i style="margin-right: 5px;"><img src="images/19-10.png"></i>
							<!-- react-text: 2570 -->竖向翻转<!-- /react-text -->
						</div>
					</div>
					<div class="slideBarGroup">
						<div class="slideBarItem">
							<p class="slideBarType">不透明</p>
							<div class="slideBar">
								<div class="slideBarButtonBar" style="width: 100px;"></div>
								<div class="slideBarButton" style="left: 100px;"></div>
								<div class="slideBarMask"></div>
							</div>
							<input type="text" class="slideBarInput" value="100%">
						</div>
					</div>
				</div>
				<div class="assetsEditDoBlockFixed">
					<div class="buttonGroup">
						<div class="doBtn undefined" title="锁定">
							<p>锁定</p>
						</div>
						<div class="doBtn" title="排序">排序</div>
						<div class="doBtn" title="复制">复制</div>
						<div class="doBtn" title="删除">删除</div>
					</div>
				</div>
			</div>
		</div>
	<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog canvas-body">
				<div>
					<div class="cb-left">
						<img src="images/img2.jpg">
					</div>
					<div class="cb-right">
						<div class="cb-title">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title " id="myModalLabel">
								调整画布尺寸
							</h4>
						</div>
						<div class="modal-body">
							<ul>
								<li>自定义尺寸 </li>
								<li class="active">公众号首图横版 900px × 383px 
									<span class="cb-source-text">原尺寸</span>
								</li>
								<li>公众号次图 200px × 200px </li>
								<li>朋友圈封面 1280px × 1184px</li>
								<li>二维码 600px × 600px</li>
								<li>手机海报:横板 900px × 500px</li>
								<li>手机海报:竖版 1080px × 1920px</li>
							</ul>
							<div></div>	
							<div class="cb-input">
								<input type="text" class="cb-width" value="900">
								<span class="cb-lock "></span>
								<input type="text" class="cb-height" value="383">
								<div class="cb-select dropdown">
									<button type="button" class="dropdown-toggle" id="dropdownMenu1" 
											data-toggle="dropdown" style="background: transparent;border: none;padding: 0;">
										px(像素)
										<span class="caret"></span>
									</button>
									<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
										<li role="presentation">
											<a role="menuitem" tabindex="-1" href="#">mm(毫米)</a>
										</li>
										<li role="presentation">
											<a role="menuitem" tabindex="-1" href="#">cm(厘米)</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="cb-smart"><input type="checkbox" value="on"><!-- react-text: 718 -->智能调整尺寸适配<!-- /react-text --></div>
							<p class="cb-notice">*修改尺寸后，设计场景将对应切换</p>
						</div>
						<div class="modal-footer" style="border-top: none;">
							<button type="button" class="btn btn-primary cb-commit" data-dismiss="modal" style="border: none;">
								调整尺寸
							</button>
						</div>
					</div>
					
				</div>
			</div><!-- /.modal -->
		</div>
		<!-- 模态框（Modal） -->
	</div>
</div>
<script>
$(document).ready(function(){
  $(".bg-quick-item").click(function(){
    $(".picker").attr({"style":$(this).attr("style")});
  });
});
</script>
<script type="text/javascript">
var obj = document.getElementById("picker");
var a = Colorpicker.create({
	el: "color-picker",
	color: "#000fff",
	change: function (elem, hex) {
		elem.style.backgroundColor = hex;
	}
})
$(document).ready(function(){
  $(".fontSelect").click(function(){
    $(".newFontSelectList").show();
  });
});
</script>
<script type="text/javascript">
//字体选择
$(function(){
$(".fontSelect").click(function(){
$(".newFontSelectList").show();
});
$(document).bind("click",function(e){
var target  = $(e.target);
if(target.closest(".newFontSelectList,.fontSelect").length == 0){/*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
$(".newFontSelectList").hide();
};
e.stopPropagation();
})
})
//字体大小
$(function(){
$(".font-btn").click(function(){
$(".fontsizeList").show();
});
$(document).bind("click",function(e){
var target  = $(e.target);
if(target.closest(".fontsizeList,.font-btn").length == 0){/*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
$(".fontsizeList").hide();
};
e.stopPropagation();
})
})
//特效
$(function(){
$(".specificWordSelect").click(function(){
$(".specificWordSelectList").show();
});
$(document).bind("click",function(e){
var target  = $(e.target);
if(target.closest(".specificWordSelectList,.specificWordSelect").length == 0){/*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
$(".specificWordSelectList").hide();
};
e.stopPropagation();
})
})
//图库
$(function(){
$(".fontSizeSelect").click(function(){
$(".cutContainerArea").show();
});
$(document).bind("click",function(e){
var target  = $(e.target);
if(target.closest(".cutContainerArea,.fontSizeSelect").length == 0){/*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
$(".cutContainerArea").hide();
};
e.stopPropagation();
})
})
</script>
</body>
</html>